```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git与GitHub：现代开发的核心工具对比</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-bg {
            background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .diagram-container {
            background: #f8fafc;
            border-radius: 0.5rem;
            padding: 2rem;
        }
        footer {
            background: #1a202c;
        }
        .link-hover:hover {
            color: #4a6cf7;
        }
        .first-letter:first-letter {
            font-size: 3.5rem;
            float: left;
            line-height: 0.8;
            margin-right: 0.5rem;
            margin-top: 0.3rem;
            color: #4a6cf7;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 serif">Git 与 GitHub</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed">现代软件开发中版本控制与协作的核心工具</p>
            <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">两个密切相关但不同的概念，在代码管理和团队协作中扮演着不可替代的角色</p>
            <div class="mt-12">
                <a href="#content" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300 transform hover:scale-105">
                    探索详情 <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main id="content" class="container mx-auto max-w-5xl px-4 py-16">
        <!-- Introduction -->
        <section class="mb-20">
            <p class="text-lg md:text-xl leading-relaxed first-letter">
                Git 和 GitHub 是现代软件开发中不可或缺的工具组合。虽然它们经常被一起提及，但它们的功能和使用场景却有着本质的区别。简单来说，<span class="font-bold text-blue-600">Git</span> 是一个分布式版本控制系统，而 <span class="font-bold text-blue-600">GitHub</span> 是基于 Git 的代码托管和协作平台。
            </p>
        </section>

        <!-- Comparison Cards -->
        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
            <!-- Git Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <div class="text-center">
                        <i class="fas fa-code-branch feature-icon"></i>
                        <h2 class="text-2xl font-bold mb-4 text-gray-800 serif">Git</h2>
                        <p class="text-gray-600 mb-6">分布式版本控制系统</p>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>版本控制：</strong>跟踪文件变更历史，管理代码版本</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>分支和合并：</strong>支持创建、切换和合并分支</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>分布式：</strong>本地仓库完整，可离线操作</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 bg-blue-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-800 mb-2">使用场景</h3>
                        <p class="text-blue-700">主要用于本地代码版本控制和管理，适用于个人开发和团队协作</p>
                    </div>
                </div>
            </div>

            <!-- GitHub Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <div class="text-center">
                        <i class="fab fa-github feature-icon"></i>
                        <h2 class="text-2xl font-bold mb-4 text-gray-800 serif">GitHub</h2>
                        <p class="text-gray-600 mb-6">代码托管与协作平台</p>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>代码托管：</strong>云端存储Git仓库，共享和访问代码</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>协作工具：</strong>Pull Requests、Issues、代码评审</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-gray-700"><strong>自动化：</strong>GitHub Actions自动化构建、测试和部署</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 bg-blue-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-800 mb-2">使用场景</h3>
                        <p class="text-blue-700">团队项目管理和开源项目协作，共享代码和进行代码评审</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">Git与GitHub工作流程</h2>
            <div class="diagram-container">
                <div class="mermaid">
                    graph LR
                    A[本地开发] -->|git commit| B[本地Git仓库]
                    B -->|git push| C[GitHub远程仓库]
                    C -->|git pull| A
                    C --> D[团队成员协作]
                    D -->|Pull Request| C
                    C -->|GitHub Actions| E[自动化部署]
                </div>
            </div>
        </section>

        <!-- Detailed Comparison -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">核心区别</h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                                <i class="fas fa-laptop-code mr-2"></i> Git
                            </h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">命令行工具，需要本地安装</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">专注于版本控制功能</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">由Linus Torvalds于2005年创建</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">开源且免费使用</p>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                                <i class="fab fa-github mr-2"></i> GitHub
                            </h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">基于Web的服务，无需安装</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">提供完整的协作生态系统</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">由GitHub, Inc.于2008年推出</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="flex-shrink-0 h-5 w-5 text-blue-500">
                                        <i class="fas fa-circle"></i>
                                    </div>
                                    <p class="ml-2 text-gray-700">提供免费和付费计划</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- When to Use -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center serif">何时使用Git或GitHub</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-blue-50 p-8 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 text-blue-800 flex items-center">
                        <i class="fas fa-user mr-2"></i> 单独使用Git
                    </h3>
                    <ul class="space-y-3 text-blue-700">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">个人项目开发，不需要与他人协作</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">需要严格的版本控制但不需要远程备份</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">在受限网络环境下工作</p>
                        </li>
                    </ul>
                </div>
                <div class="bg-blue-100 p-8 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 text-blue-800 flex items-center">
                        <i class="fas fa-users mr-2"></i> 使用GitHub
                    </h3>
                    <ul class="space-y-3 text-blue-700">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">团队协作开发项目</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">参与开源项目贡献</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-5 w-5 text-blue-500 mt-1">
                                <i class="fas fa-check"></i>
                            </div>
                            <p class="ml-2">需要代码备份和持续集成</p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="py-12 text-white">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="text-center">
                <h3 class="text-xl font-semibold mb-2">技术小馆</h3>
                <p class="text-gray-400 mb-6">探索技术的无限可能</p>
                <a href="http://www.yuque.com/jtostring" class="link-hover text-gray-300 hover:text-white transition duration-300">
                    访问语雀主页 <i class="fas fa-external-link-alt ml-1"></i>
                </a>
                <div class="mt-8 pt-8 border-t border-gray-700">
                    <p class="text-gray-500 text-sm">© 2023 技术小馆. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```